{% extends 'front/base.html' %}
{% from 'front/_macros.html' import pagination_widget as render_page %}
{% block css %}
    <link rel="stylesheet"
          href="{{ url_for('static', filename='css/pure-min.css') }}">
    <link rel="stylesheet"
          href="{{ url_for('static', filename='css/create.css') }}">
    <style>
    input#title{
        height: 3rem;
    }
   .pure-form  select {
        height: 3rem;
    }
   .page-right{
    width: 68%;
    background: rgba(255,255,255,0.8);
    padding: 15px;
    overflow: hidden;
    color: #797b7c;
    margin-left: 1rem;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 8px #bbb;
   }
   .message-header{
       display: flex;
       justify-content: space-between;
   }
   .message-header div> img{
       border-radius: 50%;
       margin-right: 1rem;
       margin-bottom: 0.5rem;
       display: inline-block;
    }
    .message-header div> span{
       vertical-align: top;
        color:#00AAAA;
    }
   .message-list> h2{
       margin-top: 2rem;
       margin-bottom: 1rem;
       border-bottom: 1px solid #ccc;
   }
   .leave-message{
       font-size:1rem
   }
   .leave-message .message-body{
       margin-bottom: 1.5rem;
       border-bottom: 1px solid #ccc;
       padding-bottom: 2rem;
   }
   .message-form-box>h2{
        margin-bottom: 1rem;
       border-bottom: 1px solid #ccc;
   }
    </style>
{% endblock %}
{% block content %}
    <div class="message-list">
        <div class="message-form-box">
            <h2>发表留言</h2>
            <form class="pure-form  pure-form-aligned pure-u-1 pure-u-md-21-24" method="post" action="">
                    {{ form.csrf_token }}
        {#        <input type="text" value="{{ club_id }}" name="club_id" style="display: none" id="club_id" />#}
                    <div class="pure-control-group">
        {#                <label for="msg_type" class="pure-u-1-6">类型</label>#}
                        {{ form.msg_type(class='pure-u-5-5',id="msg_type", placeholder="输入内容", required='') }}
                    </div>
                    <div class="pure-control-group">
        {#                <label for="content" class="pure-u-1-6">内容</label>#}
                        {{ form.content(class='pure-u-5-5', rows=7, id="content", placeholder="输入内容", required='') }}
                    </div>
                    <div class="pure-controls-group" style="text-align: right">
                        <button type="submit" class="button-success pure-button button-large pure-u-5-5" style="margin-right: 100px">提交</button>
                    </div>
                </form>
          </div>
        <h2>评论留言</h2>
        {% for message in messages_list %}
            <div class="leave-message">
                <div class="message-header">
                    <div>
                        <img src="{{ message.author.avatar_hash }}" alt="">
                        <span>{{ message.author.username }}</span>
                        <span>
                        {% if message.msg_type == 1 %}
                        建议
                        {% elif message.msg_type == 2 %}
                        问题反馈
                        {% else %}其他
                        {% endif %}
                        </span>
                    </div>

{#                    <time>{{ moment(message.create_time).format('LL') }}</time>#}

                    <time>{{ message.create_time }}</time>
                </div>
                <div class="message-body">
                    {{ message.content | safe}}
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}
{% block scripts %}
{#    {{ super() }}#}
    <script>
        function showBox(club_id){
            console.log(club_id)
            let request_html = jQuery("#access-box").html()
            let re = new RegExp("to-be-replace","g"); //定义正则表达式
            let ret = new RegExp("form-old","g"); //定义正则表达式
            let rete = new RegExp("mod-go-access","g"); //定义正则表达式
            //第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。
            let NewStr = request_html.replace(re, club_id.toString()); //第一个参数是正则表达式。
            let newString = NewStr.replace(ret, "form"); //第一个参数是正则表达式。
            let new_string = newString.replace(rete, "go-access"); //第一个参数是正则表达式。
            console.log(new_string)
            layer.open({
              type: 1, title: '输入访问密码',
              skin: 'layui-layer-demo', //样式类名
              closeBtn: 1, //不显示关闭按钮
              anim: 2,
              shadeClose: true, //开启遮罩关闭
              content: new_string
            });
        }
        jQuery("#go-access").on("click", function (){
            console.log($('#form').serialize())
            $.ajax({
            type: "post",   //请求类型
            dataType: "json",   //请求数据返回类型
            url: "/admin/json_data/sent_data",    //请求地址
            data: $('#form').serialize(),       //表单序列化
            success: function (result) {        //成功
                console.log(result);
                if (result.code === 200) {
                    console.log(result);
                    console.log("成功");
                    {#$("#club_id").text(result.data.name);#}
                    {#$("#password").text(result.data.phone);#}
                } else {
                    console.log(result);
                    console.log("失败");
                }
            },
            error: function (result) {      //失败
                console.log(result);
                console.log("异常");
            }
        });
        return false;
        })
    </script>
{% endblock %}